<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  
</body>
<script>
  // 3. 面向对象分析（OOA）
  //   - 拆解，拆分
  //   - 拆解成能直接实现的问题

  // 计算机中最原始的数据
  // 颜色
  // 大小
  // 重量
  // 功能
  // 型号
  // 白色
  // 300g
  // 10寸
  // P50
  // 打电话


  // 4. 面向对象设计（OOD）
  //   - 高内聚
  //   - 低耦合


  // 打包之后的数据，称为Object

  // 一个对象，一个手机

  // const obj = {
  //   颜色:白色,
  //   大小:10寸,
  //   重量:300g,
  //   功能:打电话,
  //   型号:P40
  // }

  // function 手机的流水线(c, s, w, f, b){
  //   const obj = {
  //     颜色: c,
  //     大小: s,
  //     重量: w,
  //     型号: b,
  //     功能: f,
  //   }
  //   return obj;
  // }

  // const p1 = 手机的流水线(白色, 300g, 10寸, 打电话, P40);
  // const p2 = 手机的流水线(白色, 300g, 10寸, 打电话, P40);
  // const p3 = 手机的流水线(白色, 300g, 10寸, 打电话, P40);
  // const p4 = 手机的流水线(白色, 300g, 10寸, 打电话, P40);

  // ==========


  // - 高内聚
  // - 低耦合

  // createObj.public = {
  //   call:function (){
  //     console.log("打电话")
  //   },
  //   sendSMS:function (){
  //     console.log("打短信")
  //   }
  // }

  // function createObj(a,b){
  //   const obj = {};
  //   obj.a = a;
  //   obj.b = b;
  //   obj.c = public.call;
  //   obj.d = public.sendSMS;
  //   return obj;
  // }

  // const o1 = createObj("hello", 19)
  // const o2 = createObj("world", 20)
  // console.log(o1);
  // console.log(o2);
  // o1.c();
  // o2.c();
  
  // console.log(o1.c === o2.c);

  // console.log(o1 === o2);



  // ========



  // 轮播图：
  // 信息：多个图片，两个按钮
  // 功能：切换
    // 点击按钮：事件源.onclick = function()
    // 计算索引：++    --
    // 计算移动距离：索引 * 图片的宽度
    // 设置给图片：图片.style.left = xxx
  
  // const imgbox = '';
  // const left = "";
  // const right = "";
  // right.onclick = function(){
  //   index++
  //   imgbox.style.left = index * imgbox[x].width + "px"
  // }

  // 打包：object，实例

  // const banner = {
  //   imgbox:"",
  //   left:"",
  //   right:"",
  //   addEvent:function(){
  //     right.onclick = function(){
  //       // 建立耦合关系
  //       banner.changeIndex()
  //     }
  //   },
  //   changeIndex:function(){
  //     index++
  //     // 建立耦合关系
  //     banner.changeImg()
  //   },
  //   changeImg:function(){
  //     imgbox.style.left = index * imgbox[x].width + "px"
  //   }
  // }

  // 打包：建立流水线工厂

  // 接口规范：制定功能
  createBanner.public = {
    ae:function (){
      this.right.onclick = function(){
        // 建立耦合关系
        banner.changeIndex()
      }
    },
    ci: function(){
      index++
      // 建立耦合关系
      banner.changeImg()
    },
    cImg: function(){
      imgbox.style.left = index * imgbox[x].width + "px"
    }
  }

  // 类：约束了属性（信息）
  function createBanner(imgbox, left, right){
    const banner = {
      imgbox,
      left,
      right,
      addEvent: createBanner.public.ae,
      changeIndex: createBanner.public.ci,
      changeImg:createBanner.public.cImg
    }
    return banner;
  }

  // 创建实例
  const b1 = createBanner("", "", "");
  const b2 = createBanner("", "", "");

  console.log(b1);
  console.log(b2);
  console.log(b1 === b2);
  b1.addEvent();
  b2.addEvent();
  console.log( b1.addEvent === b2.addEvent );
  console.log( b1.ci === b2.ci );
  console.log( b1.cImg === b2.cImg );


  // 接口规范约束了类，提供哪些功能
  // 类约束了实例，提供哪些属性

  // 类是实例的抽象
  // 实例是类的具象
  
</script>
</html>